<template>
  <div ref="dragContainerEle">
    <slot></slot>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, useAttrs } from 'vue'
import Sortable from 'sortablejs'

interface PropsType {
  modelValue: any[]
}

const attrs = useAttrs()
const props = defineProps<PropsType>()

const dragContainerEle = ref(null)

onMounted(() => {
  dragContainerEle.value &&
    Sortable.create(dragContainerEle.value, {
      onUpdate: ({ newIndex, oldIndex }) => {
        if (newIndex !== undefined && oldIndex !== undefined) {
          const temp = props.modelValue.splice(oldIndex, 1)[0]
          props.modelValue.splice(newIndex, 0, temp)
        }
      },
      ...attrs
    })
})
</script>